import DatePicker from "components/antd-compatible/date-picker";
import React from "react";
import { messages } from "share/common";
import { Button, Modal, Radio, Select } from "antd";
import moment from "moment";
import ExportModal from "components/template/export-modal/export-modal";

const Option = Select.Option;
const RadioGroup = Radio.Group;

class BookingModuleExporter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      startDate: null, //导出数据的开始时间
      endDate: null, //导出数据的结束时间
      dateRadio: "all", //导出数据选择的时间类型
    };
  }

  //设置导出的时间
  setDate = (type, date) => {
    if (type === "startDate") {
      this.setState({
        startDate: date ? moment(date).format("YYYY-MM-DD 00:00:00") : null,
        dateRadio: date || this.state.endDate ? "" : "all",
      });
    } else if (type === "endDate") {
      this.setState({
        endDate: date ? moment(date).format("YYYY-MM-DD 23:59:59") : null,
        dateRadio: date || this.state.startDate ? "" : "all",
      });
    } else if (type === "one" || type === "three") {
      const diffMonth = type === "one" ? -1 : -3;
      const now = moment();
      const year = new Date().getFullYear();
      const month = new Date().getMonth() + 1;
      let startDate = type === "one" ? `${year}-${month}-1` : now.clone().add(diffMonth, "month");
      startDate = moment(startDate).format("YYYY-MM-DD 00:00:00");
      const endDate = now.clone().format("YYYY-MM-DD 23:59:59");
      this.setState({
        dateRadio: type,
        startDate,
        endDate,
      });
    } else {
      this.setState({
        dateRadio: type,
        startDate: null,
        endDate: null,
      });
    }
  };

  handleModalShow = () => {
    this.setState({
      modalVisible: true,
      startDate: null,
      endDate: null,
      dateRadio: "all",
    });
  };

  getProps = () => {
    const { startDate, endDate } = this.state;
    const { isOpenBookingPlatform, pageType, exportParams } = this.props;
    let formatInfo = {};
    switch (pageType) {
      case "BookingCommissioner":
        formatInfo = {
          exportTitle: messages("common.ok") /*确定*/,
          exportType: isOpenBookingPlatform ? "TRAVEL_BOOK_EXPORT_NEW" : "TRAVEL_BOOK_EXPORT",
          exportCommand: isOpenBookingPlatform ? "TRAVEL_BOOK_EXPORT_NEW" : "TRAVEL_BOOK_EXPORT",
          btnType: "primary",
          exportCondition: {
            billCheckSearchCommand:
              !startDate && !endDate
                ? {}
                : {
                    beginDate: startDate,
                    endDate,
                  },
          },
        };
        break;
      case "BookingManagerView":
        formatInfo = {
          exportTitle: messages("common.ok") /*确定*/,
          exportType: "SUPERVISOR_TICKET_BOOKING_ORDER",
          exportCommand: "SUPERVISOR_TICKET_BOOKING_ORDER",
          btnType: "primary",
          exportCondition: {
            startTime: startDate,
            endTime: endDate,
            ...exportParams,
          },
        };
        break;
      default:
        formatInfo = {};
    }
    return formatInfo;
  };

  render() {
    const { modalVisible, startDate, endDate, dateRadio } = this.state;
    const { exportButtonText, exportParams } = this.props;
    return (
      <div className="booking-exportor">
        <Button type="primary" onClick={this.handleModalShow}>
          {exportButtonText}
        </Button>
        <Modal
          title={messages("supplier-2.key8") /*导出数据*/}
          okText={messages("supplier-2.key9") /*导出*/}
          visible={modalVisible}
          onCancel={() => this.setState({ modalVisible: false })}
          footer={
            <div>
              <Button
                onClick={() => this.setState({ modalVisible: false })}
                style={{ float: "right", marginLeft: "16px" }}
              >
                {messages("common.cancel") /*取消*/}
              </Button>
              <ExportModal type="btn" {...this.getProps()} />
            </div>
          }
        >
          <p>{messages("supplier-2.key10") /*请选择最后编辑日期*/}</p>
          <div>
            <DatePicker
              value={startDate ? moment(startDate) : startDate}
              placeholder={messages("supplier-2.key11") /*开始日期*/}
              onChange={(value) => this.setDate("startDate", value)}
            />
            &nbsp;&nbsp;至&nbsp;&nbsp;
            <DatePicker
              value={endDate ? moment(endDate) : endDate}
              placeholder={messages("common.end.date") /*结束日期*/}
              onChange={(value) => this.setDate("endDate", value)}
            />
          </div>
          <div style={{ marginTop: 10 }}>
            <RadioGroup onChange={(e) => this.setDate(e.target.value || e.currentTarget.value)} value={dateRadio}>
              <Radio value="all">{messages("common.all") /*全部*/}</Radio>
              <Radio value="one">{messages("common.this.month") /*当月*/}</Radio>
              <Radio value="three">{messages("supplier-2.key12") /*近三个月*/}</Radio>
            </RadioGroup>
          </div>
        </Modal>
      </div>
    );
  }
}

BookingModuleExporter.propTypes = {
  pageType: React.PropTypes.string, // 导出所对应页面的唯一标识
  isOpenBookingPlatform: React.PropTypes.any, // 是否开启了订票平台
  exportButtonText: React.PropTypes.string, // 导出按钮文案
  exportParams: React.PropTypes.object, // 额外参数
};

BookingModuleExporter.defaultProps = {
  exportButtonText: messages("supplier-2.key8") /*导出数据*/,
  pageType: "BookingCommissioner",
};

export default BookingModuleExporter;
